<!-- 已登录页面 -->
<template>
	<view class="nuser-box">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<!-- 中间内容 -->
		<view class="user">
			<!-- 头像 -->
			<view class="user-image">
				<u-avatar :src="user.avatar" size="60" class="avter"></u-avatar>
			</view>
			<!-- 手机号id显示 -->
			<view class="user-mbilb">
				<text>{{ user.nickname }}</text>
				<br />
				<view class="user-mbilb-text">
					{{ user.phone }}
					<image src="/static/image/编辑.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 余额样式 -->
		<view class="select-box">
			<view class="select">
				<navigator url="../../pages/users/user_info/blance">
					<text class="text">{{ user.nowMoney }}</text>
					<view>余额</view>
				</navigator>
			</view>
			<view class="select">
				<navigator url="../../pages/users/user_info/integral">
					<text class="text">{{ user.integral }}</text>
					<view>积分</view>
				</navigator>
			</view>
			<view class="select">
				<navigator url="../../pages/points/youhui">
					<text class="text">{{ user.couponCount }}</text>
					<view>优惠劵</view>
				</navigator>
			</view>
			<view class="select">
				<navigator url="../../subpackages/shoucang/shoucang">
					<text class="text">{{ user.collectCount }}</text>
					<view>收藏</view>
				</navigator>
			</view>
		</view>
		<!-- 订单中心 -->
		<view class="shoop-box">
			<!-- 上 -->
			<view class="orders">
				<view class="orders-a">订单中心</view>
				<navigator url="../../pages/order/index">
					<view class="orders-b">查看全部 ></view>
				</navigator>
			</view>
			<!-- 下 -->
			<view class="orders-bottom" @click="toOrders">
				<!-- <! 小模块 跳转页面需要在此标签下加 -->
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
						<image
							src="../../static/image/order1.png"
							mode=""
						></image>
					</view>
					<view class="orders-bottom-text">待付款</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
						<image
							src="../../static/image/order2.png"
							mode=""
						></image>
					</view>
					<view class="orders-bottom-text">待发货</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
						<image
							src="../../static/image/order3.png"
							mode=""
						></image>
					</view>
					<view class="orders-bottom-text">待收货</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
						<image
							src="../../static/image/order4.png"
							mode=""
						></image>
					</view>
					<view class="orders-bottom-text">待评价</view>
				</view>
				<view class="orders-bottom-a">
					<view class="orders-bottom-img">
						<image
							src="../../static/image/order5.png"
							mode=""
						></image>
					</view>
					<view class="orders-bottom-text">售后/退款</view>
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="bannner-user">
			<template>
				<u-swiper :list="banner" keyName="pic" height="90"></u-swiper>
			</template>
		</view>
		<!-- 我的服务 -->
		<view class="serve-box">
			<view class="serve-box-a">我的服务</view>
			<view class="serva-menu">
				<view
					class="serve-box-b"
					v-for="(item, index) in menubs"
					:key="index"
				>
					<!-- 跳转得页面需要在这个标签下加 -->
					<!-- 路由地址如下 -->
					<navigator :url="item.url">
						<navigator :url="addressList[index]">
							<view class="serve-box-c">
								<view class="serve-box-img">
									<image :src="item.pic" mode=""></image>
								</view>
								<view class="serve-box-text">
									{{ item.name }}
								</view>
							</view>
						</navigator>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 脚部log -->
		<view class="support">
			<image src="../../static/image/support.png" mode=""></image>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {Finduser, Findmenu} from "../../network/my.js";
export default {
	data() {
		return {
			user: [], //用户信息
			banner: [], //banner图
			menubs: [], //我的服务
			addressList: [
				"",
				"../../subpackages/kanjia/kanjia",
				"../../pages/points/point",
				"../../pages/users/user_info/blance",
				"../../pages/users/users_address_list/index",
				"../../subpackages/shoucang/shoucang",
				"../../pages/points/youhui"
			]
		};
	},
	components: {
		Nav
	},
	methods: {
		toOrders() {
			uni.navigateTo({
				url: "/pages/order/index"
			});
		},
		async finduser() {
			//获取用户信息
			let res = await Finduser();
			this.user = res.data;
			// console.log('用户信息', res.data);
		},
		async findMenu() {
			//获取个人菜单
			let res = await Findmenu();
			this.banner = res.data.routine_my_banner;
			// console.log(this.banner)
			this.menubs = res.data.routine_my_menus;
			// console.log(this.menubs);
			// console.log("跳转地址", res.data.routine_my_menus[0].url);
		}
	},
	created() {
		this.finduser(); //个人信息
		this.findMenu();
	},
	onShow() {
		this.finduser(); //个人信息
		this.findMenu();
	}
};
</script>

<style lang="scss" scoped>
.nuser-box {
	display: flex;
	flex-direction: column;
}
// 头部样式
.user {
	display: flex;
	align-items: center;

	.user-image {
		margin: 0 10px;

		.avter {
			padding-top: 20px;
		}
	}

	.user-mbilb {
		color: #fff;
		margin-top: 20px;
		.user-mbilb-text {
			display: flex;
			align-items: center;
			margin-top: 8px;
			font-size: 12px;
			opacity: 0.5;
		}

		image {
			margin-left: 10px;
			width: 15px;
			height: 15px;
		}
	}
}
// banne样式
.bannner-user {
	width: 92%;
	margin: 15px 14px;
	border-radius: 10px;
	margin-bottom: 10px;
}

// 余额相关样式
.select-box {
	display: flex;
	text-align: center;
	justify-content: space-around;
	margin-top: 40px;
	.select {
		color: #fff;

		.text {
			font-size: 20px;
		}

		view {
			opacity: 0.5;
			font-size: 13px;
		}
	}
}

// 订单中心样式
.shoop-box {
	width: 92%;
	margin: 15px 14px;
	background-color: #fff;
	border-radius: 10px;
	margin-bottom: 10px;

	// 订单中心
	.orders {
		display: flex;
		padding: 10px 10px;

		.orders-a {
			font-size: 16px;
			font-weight: 600;
			margin-right: auto;
		}

		.orders-b {
			font-size: 14px;
			opacity: 0.8;
		}
	}
}

.orders-bottom {
	display: flex;
	padding: 10px 10px;
	justify-content: space-around;

	.orders-bottom-a {
		text-align: center;

		.orders-bottom-img image {
			width: 30px;
			height: 30px;
		}

		.orders-bottom-text {
			margin-top: 10rpx;
			font-size: 12px;
		}
	}
}

// 我的服务样式
.serve-box {
	width: 92%;
	margin: 15px 14px;
	background-color: #fff;
	border-radius: 10px;
	margin-bottom: 10px;

	.serva-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.serve-box-a {
		padding: 0 10px;
		padding-top: 10px;
		font-size: 16px;
		font-weight: 600;
	}

	.serve-box-b {
		padding: 15px 15px;
		.serve-box-c {
			text-align: center;
			.serve-box-img image {
				width: 30px;
				height: 30px;
			}
			.serve-box-text {
				font-size: 12px;
			}
		}
	}
}

// dialog
.support {
	width: 100%;
	height: 120px;
	margin: auto;
	text-align: center;
	background-color: #f3f3f3;
	image {
		// margin-top: 20px;
		width: 100px;
		height: 50px;
	}
}
</style>
